<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <style type="text/css">
        *{
            /* 初始化 */
            margin: 0;
            padding: 0;
        }
        body{
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局 居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(200deg,#5ccdde,#aac2ee);
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .container{
            /* 相对定位 */
            position: relative;
            z-index: 1;
            background-color: #fff;
            border-radius: 15px;
            /* 弹性布局 垂直排列 */
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 350px;
            height: 500px;
            /* 阴影 */
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        .container .tit{
            font-size: 26px;
            margin: 45px auto 50px auto;
        }
        .container input{
            width: 280px;
            height: 30px;
            text-indent: 8px;
            border: none;
            border-bottom: 1px solid #ddd;
            outline: none;
            margin: 12px auto;
        }

        .container button{
            width: 280px;
            height: 40px;
            margin: 35px auto 40px auto;
            border: none;
            background: linear-gradient(-200deg,#5ccdde,#aac2ee);
            color: #fff;
            font-weight: bold;
            letter-spacing: 8px;
            border-radius: 10px;
            cursor: pointer;
            /* 动画过渡 */
            transition: 0.5s;
        }
        .container button:hover{
            background: linear-gradient(-200deg,#aac2ee,#fac0e7);
            background-position-x: -280px;
        }
        .container span{
            font-size: 14px;
        }
        .container a{
            color: plum;
            text-decoration: none;
        }
        ul li{
            position: absolute;
            border: 1px solid #fff;
            background-color: #fff;
            width: 30px;
            height: 30px;
            list-style: none;
            opacity: 0;
        }
        .square li{
            top: 40vh;
            left: 60vw;
            /* 执行动画：动画名 时长 线性的 无限次播放 */
            animation: square 10s linear infinite;
        }
        .square li:nth-child(2){
            top: 80vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }
        .square li:nth-child(3){
            top: 80vh;
            left: 85vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }
        .square li:nth-child(4){
            top: 10vh;
            left: 70vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }
        .square li:nth-child(5){
            top: 10vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }
        .circle li{
            bottom: 0;
            left: 15vw;
            /* 执行动画 */
            animation: circle 10s linear infinite;
        }
        .circle li:nth-child(2){
            left: 35vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }
        .circle li:nth-child(3){
            left: 55vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }
        .circle li:nth-child(4){
            left: 75vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }
        .circle li:nth-child(5){
            left: 90vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }
        .thecheck{
            font-size: 14px;
            margin-left: -168px;
            padding: 8px 0;
            color: #555;
        }
        .container select {
            cursor: pointer;
            background-image: none;
            display: inline-block;
            width: 280px;
            padding: 8px;
            background-color: #fff;
            color: #555;
            text-shadow: none;
            border-radius: 4px;
            transition: box-shadow 0.25s ease;

        }
        .container select :hover {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        }
        .container select:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #ccc;
            top: 14px;
            right: 10px;
            cursor: pointer;
            z-index: -2;
        }

        .container select:focus {
            outline: none;
        }

        .msg {
            margin-bottom: -10px;
            font-size: 14px;
            color: #555;
        }
        /* 定义动画 */
        @keyframes square {
            0%{
                transform: scale(0) rotateY(0deg);
                opacity: 1;
            }
            100%{
                transform: scale(5) rotateY(1000deg);
                opacity: 0;
            }
        }
        @keyframes circle {
            0%{
                transform: scale(0) rotateY(0deg);
                opacity: 1;
                bottom: 0;
                border-radius: 0;
            }
            100%{
                transform: scale(5) rotateY(1000deg);
                opacity: 0;
                bottom: 90vh;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../static/js/vendor/jquery-2.2.4.min.js"></script>

<script type="text/javascript">
    window.onload = function(){
        if (${repassword != null}){
            alert("${repassword}");
        }
    }
</script>
<form method="post" th:action="@{/login}">
<div class="container">

    <div class="tit">登录</div>
    <input type="text" placeholder="账号" name="username">
    <input type="password" placeholder="密码" name="password">

    <div class="thecheck">请选择用户身份</div>
        <select  class="flag" name="flag">
            <option value="1">读者</option>
            <option value="0">管理员</option>

        </select>
    </br>
        <div class="msg">
            <label th:text="${msg}"></label>
            <label th:text="${UnLogin}"></label>
        </div>
    <button type="submit">登录</button>
    <span>没有账号？<a href="#">去注册</a></span>

</div></form>
<div class="square">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="circle">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>